<template>
  <div>
    <el-card
      style="margin-bottom: 20px"
    >
      <el-form
        label-width="120px"
      >
        <el-form-item :label="$t('title')">
          <el-input v-model="doc.title" />
        </el-form-item>
        <el-form-item v-if="this.docType === 'product'" :label="$t('product')">
          <el-select v-model="doc.productId" @change="productChange">
            <el-option
              v-for="item in productList"
              :key="item.productId"
              :label="item.name"
              :value="item.productId"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="this.docType === 'product'" :label="$t('series')">
          <el-select v-model="doc.seriesId">
            <el-option
              v-for="item in seriesList"
              :key="item.seriesId"
              :label="item.name"
              :value="item.seriesId"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('title')">
          <el-tag
            v-for="keyword in doc.keywordList"
            :key="keyword"
            size="medium"
            closable
            :disable-transitions="false"
            @close="handleClose(keyword)"
          >
            {{ keyword }}
          </el-tag>
          <el-input
            v-if="inputVisible"
            ref="saveTagInput"
            v-model="keywordAdd"
            class="input-new-tag"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button v-else class="button-new-tag" size="small" icon="el-icon-plus" @click="showInput" />
        </el-form-item>
        <el-form-item :label="$t('type')">
          <el-select v-model="doc.fileType">
            <el-option
              v-for="item in fileTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('language')">
          <el-select v-model="doc.languageList" multiple>
            <el-option
              v-for="item in languageList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message')">
          <ueditor-from :content="doc" height="600px" :type="doc.fileType" />
        </el-form-item>
      </el-form>
      <div style="float: right;margin-bottom: 20px">
        <el-button type="primary" @click="addOrUpdate">{{ $t('confirm') }}</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { formatDate, listLanguage, successNotice } from '@/util/common'

import UeditorFrom from '@/components/UeditorFrom'
import { getCompanyId } from '@/util/storage'
import { getSeriesList } from '@/api/iot/iotProductSeriesApi'
import { listProduct } from '@/api/iot/iotProductApi'
import { getDocSystem, insertDocSystem, updateDocSystem } from '@/api/iot/iotDocSystemApi'
import { getDocProduct, insertDocProduct, updateDocProduct } from '@/api/iot/iotDocProductApi'
import { getDocCustom, insertDocCustom, updateDocCustom } from '@/api/iot/iotDocCustomApi'

export default {
  name: 'Edit',
  components: {
    UeditorFrom
  },
  data() {
    return {
      type: null,
      docType: null,
      id: null,
      doc: {},
      companyId: getCompanyId(),
      languageList: [],
      inputVisible: false,
      keywordAdd: '',
      productList: [],
      seriesList: [],
      fileTypeList: [
        {
          value: 'html',
          label: 'html'
        },
        {
          value: 'md',
          label: 'markDown'
        },
        {
          value: 'text',
          label: this.$t('text')
        }
      ]
    }
  }, created() {
    this.languageList = listLanguage(this)
    const param = this.$route.query
    this.type = param.type
    this.docType = param.docType
    this.id = param.id
    if (this.docType === 'product') {
      this.listProduct()
    }
    if (this.type === 'edit') {
      this.getDoc()
    } else {
      this.showAdd()
    }
  }, methods: {
    getDoc() {
      let p
      switch (this.docType) {
        case 'system':
          p = getDocSystem({
            id: this.id
          })
          break
        case 'product':
          p = getDocProduct({
            id: this.id
          })
          break
        case 'custom':
          p = getDocCustom({
            id: this.id
          })
          break
        default:
          return
      }
      p.then(res => {
        const { data, code } = res
        if (code === '200') {
          this.doc = data
        }
      })
    },
    getSeriesList() {
      getSeriesList({
        productId: this.doc.productId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.seriesList = data
          this.seriesList.unshift({
            seriesId: null,
            name: this.$t('all')
          })
        } else {
          this.seriesList = []
        }
      })
    },
    listProduct() {
      listProduct({
        companyId: this.companyId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          if (!this.doc.productId) {
            this.doc.productId = data[0].productId
          }
          this.productList = data
          this.getSeriesList()
        }
      })
    },
    productChange() {
      this.getSeriesList()
    },
    handleClose(tag) {
      this.doc.keywordList.splice(this.doc.keywordList.indexOf(tag), 1)
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const keywordAdd = this.keywordAdd
      if (keywordAdd) {
        this.doc.keywordList.push(keywordAdd)
      }
      this.inputVisible = false
      this.keywordAdd = ''
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    showAdd() {
      switch (this.docType) {
        case 'system':
          this.doc = {}
          break
        case 'product':
          this.doc = {}
          break
        case 'custom':
          this.doc = {
            companyId: this.companyId
          }
          break
      }
      this.doc.keywordList = []
      this.doc.languageList = [this.languageList[0].value]
      this.doc.fileType = this.fileTypeList[0].value
    },
    addOrUpdate() {
      const json = {
        ...this.doc
      }

      if (this.doc.id) {
        let p
        switch (this.docType) {
          case 'system':
            p = updateDocSystem(json)
            break
          case 'product':
            p = updateDocProduct(json)
            break
          case 'custom':
            p = updateDocCustom(json)
            break
          default:
            return
        }
        p.then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
        })
      } else {
        let p
        switch (this.docType) {
          case 'system':
            p = insertDocSystem(json)
            break
          case 'product':
            p = insertDocProduct(json)
            break
          case 'custom':
            p = insertDocCustom(json)
            break
          default:
            return
        }
        p.then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
            this.showAdd()
          }
        })
      }
    }
  }
}
</script>
<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
